<template>
  <div class="divBox">
    <el-card class="box-card">
      <el-tabs
        v-model="activeNamel1"
        @tab-click="handleTabClick"
        v-loading="loading"
        v-if="checkPermi(['platform:config:info'])"
      >
        <el-tab-pane v-for="(tab, index) in treeList" :key="index" :label="tab.name" :name="tab.id.toString()">
          <template>
            <el-tabs
              v-if="tab.child.length > 0"
              v-model="activeNamel2"
              type="border-card"
              @tab-click="handleItemTabClick"
            >
              <el-tab-pane
                v-for="(tabItem, itemIndex) in tab.child"
                :key="itemIndex"
                :label="tabItem.name"
                :name="tabItem.extra"
              >
                <parser
                  v-if="formConfChild.render"
                  :is-edit="formConfChild.isEdit"
                  :form-conf="formConfChild.content"
                  :form-edit-data="currentEditData"
                  @submit="handlerSubmit"
                />
              </el-tab-pane>
            </el-tabs>
            <span v-else>
              <parser
                v-if="formConf.render"
                :is-edit="formConf.isEdit"
                :form-conf="formConf.content"
                :form-edit-data="currentEditData"
                @submit="handlerSubmit"
              />

              <!--币种配置-->
              <el-alert
                :closable="false"
                title="The currency setting is set when the system is initialized and cannot be changed at will. It needs to be set in accordance with the currency opened by the payment product. Configure the price unit of the product and click on the line to select the content"
                type="warning"
                effect="dark"
              >
              </el-alert>
              <el-divider></el-divider>
              <div>
                <span>Selected currency：{{ country }} , {{ currency }} , {{ symbol }}</span>
                <el-divider></el-divider>
              </div>
              <el-table
                ref="singleTable"
                :data="tableData.filter((data) => !search || data.country.toLowerCase().includes(search.toLowerCase()))"
                highlight-current-row
                @current-change="handleCurrentChange"
                style="width: 100%"
              >
                <el-table-column property="ID" label="ID"></el-table-column>
                <el-table-column property="country" label="country"></el-table-column>
                <el-table-column property="currency" label="currency"></el-table-column>
                <el-table-column property="symbol" label="symbol"></el-table-column>
                <el-table-column align="right">
                  <template slot="header" slot-scope="scope">
                    <el-input v-model="search" size="mini" placeholder="" />
                  </template>
                  <template slot-scope="scope">
                    <el-button size="mini" @click="handleChecked(scope.$index, scope.row)">Sure</el-button>
                  </template>
                </el-table-column>
              </el-table>
            </span>
          </template>
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import parser from '@/components/FormGenerator/components/parser/Parser';
import * as categoryApi from '@/api/categoryApi.js';
import * as selfUtil from '@/utils/ZBKJIutil.js';
import * as systemFormConfigApi from '@/api/systemFormConfig.js';
import * as systemSettingApi from '@/api/systemSetting.js';
import * as systemConfigApi from '@/api/systemConfig.js';
// import { configSaveUniq, configGetUniq } from '@/api/systemConfig';
import currency from '@/assets/json/currency.json';
import { beautifierConf } from '@/components/FormGenerator/utils';
import { checkPermi } from '@/utils/permission'; // 权限判断函数
import { Debounce } from '@/utils/validate';
export default {
  // name: "index",
  components: { parser },
  data() {
    return {
      loading: false,
      formConf: { content: { fields: [] }, id: null, render: false, isEdit: false },
      formConfChild: { content: { fields: [] }, id: null, render: false, isEdit: false },
      activeNamel1: null,
      activeNamel2: '', //针对文件特殊处理
      treeList: [],
      editDataChild: {},
      isCreate: 0,
      currentEditId: null,
      currentEditData: null,
      currentSelectedUploadFlag: null,
      tableData: currency, //币种列表值
      search: '', //币种列表搜索字段
      country: '', //国家
      currency: '', //币种
      symbol: '', //符号
    };
  },
  mounted() {
    if (checkPermi(['platform:config:info'])) this.handlerGetTreeList();
    this.getCurrentUploadSelectedFlag();
    this.getCurrency();
  },
  methods: {
    checkPermi,
    handleCurrentChange(val) {
      this.currentRow = val;
    },
    //获取币种
    getCurrency() {
      systemConfigApi.configGetUniq({ key: 'shop_pay_currency' }).then((res) => {
        let data = JSON.parse(res);
        this.country = data.country; //国家
        this.currency = data.currency; //币种
        this.symbol = data.symbol; //符号
        localStorage.setItem('shopPayCurrencyPlat', JSON.stringify(data.symbol));
      });
    },
    //选中货币提交
    handleChecked(i, item) {
      this.$modalSure(
        'Modify the currency settings? The currency settings are set when the system is initialized and cannot be changed at will. They need to be set in accordance with the currency opened by the payment product.',
      ).then(() => {
        systemConfigApi.configSaveUniq({ key: 'shop_pay_currency', value: JSON.stringify(item) }).then((data) => {
          this.country = item.country; //国家
          this.currency = item.currency; //币种
          this.symbol = item.symbol; //符号
          this.$message.success('Submit successfully');
        });
      });
    },
    //点击tab导航栏
    handleTabClick(tab) {
      if (!tab.$children[0].panes) return;
      this.activeNamel2 = tab.$children[0].panes[0].name;
      this.handlerGetLevel2FormConfig(this.activeNamel2);
    },
    handlerGetLevel1FormConfig(id) {
      const formPram = { id: id };
      this.currentEditId = id;
      this.formConf.content = { fields: [] };
      this.formConf.render = false;
      this.loading = true;
      systemFormConfigApi
        .getFormConfigInfo(formPram)
        .then((data) => {
          const { id, name, info, content } = data;
          this.formConf.content = JSON.parse(content);
          this.formConf.id = id;
          this.handlerGetSettingInfo(id, 1);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleItemTabClick(tab, event) {
      //这里对tabs=tab.name和radio=id做了兼容
      let _id = tab.name ? tab.name : tab;
      if (!_id) return this.$message.error('The form configuration is incorrect. Please associate the correct form before using it.');
      this.handlerGetLevel2FormConfig(_id);
    },
    handlerGetLevel2FormConfig(id) {
      const formPram = { id: id };
      this.currentEditId = id;
      this.formConfChild.content = { fields: [] };
      this.formConfChild.render = false;
      this.loading = true;
      systemFormConfigApi
        .getFormConfigInfo(formPram)
        .then((data) => {
          const { id, name, info, content } = data;
          this.formConfChild.content = JSON.parse(content);
          this.formConfChild.id = id;
          this.handlerGetSettingInfo(id, 2);
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handlerGetSettingInfo(id, level) {
      systemSettingApi.systemConfigInfo({ id: id }).then((data) => {
        this.currentEditData = data;
        if (level === 1) {
          this.formConf.isEdit = this.currentEditData !== null;
          this.formConf.render = true;
        } else {
          this.formConfChild.isEdit = this.currentEditData !== null;
          this.formConfChild.render = true;
        }
      });
    },
    //表单提交
    handlerSubmit: Debounce(function (formValue) {
      if (checkPermi(['platform:config:save:form'])) {
        this.handlerSave(formValue);
      } else {
        this.$message.warning('No operation permission');
      }
    }),
    //保存方法
    handlerSave(formValue) {
      const _pram = this.buildFormPram(formValue);
      let _formId = 0;
      systemSettingApi.systemConfigSave(_pram).then((data) => {
        this.$message.success('Add data successfully');
      });
    },
    //获取配置数据
    handlerGetTreeList() {
      const _pram = { type: this.$constants.categoryType[5].value, status: 1 };
      this.loading = true;
      categoryApi
        .treeCategroy(_pram)
        .then((data) => {
          this.treeList = this.handleAddArrt(data);
          if (this.treeList.length > 0) this.activeNamel1 = this.treeList[0].id.toString();
          if (this.treeList.length > 0 && this.treeList[0].child.length > 0) {
            this.activeNamel2 = this.treeList[0].child[0].extra;
          }
          if (this.activeNamel2) {
            this.handlerGetLevel2FormConfig(this.treeList[0].child[0].extra);
          }
          this.treeList.push({
            extra: null,
            id: 600,
            name: 'Currency configuration',
            path: '/0/',
            pid: 0,
            sort: 1,
            status: true,
            type: 6,
            url: 'short_letter_switch',
            child: [],
          });
          this.loading = false;
        })
        .catch(() => {
          this.loading = false;
        });
    },
    handleAddArrt(treeData) {
      // let _result = this.addTreeListLabel(treeData)
      const _result = selfUtil.addTreeListLabel(treeData);
      return _result;
    },
    buildFormPram(formValue) {
      const _pram = {
        fields: [],
        id: this.currentEditId,
        sort: 0, // 参数暂时无用
        status: true, // 参数暂时无用
      };
      const _fields = [];
      Object.keys(formValue).forEach((key) => {
        if (key !== 'id') {
          _fields.push({
            name: key,
            title: key,
            value: formValue[key],
          });
        }
      });
      _pram.fields = _fields;
      return _pram;
    },
    getCurrentUploadSelectedFlag() {
      systemConfigApi.configGetUniq({ key: 'uploadType' }).then((data) => {
        this.currentSelectedUploadFlag = parseInt(data);
      });
    },
  },
};
</script>

<style scoped></style>
